<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>方块运动</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#myCan {
				background-color: lightyellow;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			var timer = null;
			var index = 10;
			var index2 = 10;
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.fillStyle = 'greenyellow'
			
			timer = setInterval(function(){
				ctx.clearRect(0,0,600,600);
				ctx.fillRect(index,index,100,100);
				ctx.fillRect(index,index,100,100);
				index+=130;
				if(index>600){
					index = -100;
				}
			},0.1);
		</script>
	</body>
</html>
